<template>
  <div id="cart">
    <div class="head">
      <headerTitle>
        <div slot="headText" class="headerText">购物车</div>
        <div slot="edit" class="edit">编辑</div>
        <div></div>
      </headerTitle>
    </div>
    <div class="contentBox">
      <div class="cartBox">
        <ul class="cartList">
          <li class="cartLi" v-for="(item, idx) in cartList" :key="idx">
            <span @click="check(idx)" class="check" :class="{checked:item.check==true}"></span>
            <img :src="item.imgPath" />
            <!-- <img src="../../assets/img/biyan.png" /> -->
            <div class="leftBox">
              <p class="name">{{ item.name }}</p>
              <p class="color" >{{ item.color }}</p>
              <div class="footer">
                <span class="price">￥{{ item.price }}</span>
                <input type="button" value="-" class="reduce" @click="reduce(idx)" />
                <span class="count">{{ item.count }}</span>
                <input type="button" value="+" class="add" @click="add(idx)" />
              </div>
            </div>
          </li>
        </ul>
      </div>
      <h2 class="likeTitle">猜你喜欢</h2>
      <div class="likeBox">
        <ul class="likeList">
          <li class="likeLi" v-for="(item, idx) in likeList" :key="idx">
            <img :src="item.imgPath" />
            <p class="name">{{ item.name }}</p>
            <div class="footer">
              <span class="price">￥{{ item.price }}</span>
              <span class="city">{{ item.city }}</span>
            </div>
          </li>
        </ul>
      </div>
    </div>
    <div class="settlementBox">
      <span class="checkAllIcon" @click="checkAll" :class="{checkAllIcon2:checkAlled==true}"></span>
      <span class="checkAllText" @click="checkAll">全选</span>
      <span class="totalText">合计</span>
      <span class="totalPrice">￥{{totalPrice}}</span>
      <input type="button" value="结算" class="settlementBtn" />
    </div>
  </div>
</template>

<script>
import headerTitle from "../../../src/components/header";
export default {
  name: "defaultHtml",
  data() {
    return {
      checkAlled:false,
      totalPrice:0,
      path:'goodsAttribute',
      cartList: [
        {
          id: "1",
          imgPath: require("../../assets/img/biyan.png"),
          name: "莫源 | 独自设计·鼻烟壶套装加送盒子",
          color: "蓝绿色",
          price: 1099,
          count: 1,
          check:false
        },
        {
          id: "2",
          imgPath: require("../../assets/img/chenshi.png"),
          name: "陈思 | 景德镇原创陶瓷杯子三件套",
          color: "绿色",
          price: 588,
          count: 1,
          check:false
        },
      ],
      likeList: [
        {
          id: "1",
          imgPath: require("../../assets/img/kouhong.png"),
          name: "慢生活 | 铜制口红外壳，手工雕刻",
          price: 188,
          city: "西安",
        },
        {
          id: "2",
          imgPath: require("../../assets/img/gem.png"),
          name: "18k金镶嵌沙弗来紫宝石吊坠耳饰手链三件套可...",
          price: 2898,
          city: "福建",
        },
        {
          id: "3",
          imgPath: require("../../assets/img/chahu.png"),
          name: "慢生活 | 铜制口红外壳，手工雕刻",
          price: 188,
          city: "西安",
        },
        {
          id: "4",
          imgPath: require("../../assets/img/chenshi.png"),
          name: "18k金镶嵌沙弗来紫宝石吊坠耳饰手链三件套可...",
          price: 2898,
          city: "福建",
        },
      ],
    };
  },
  components: {
    headerTitle,
  },
  async created(){


    
    // setTimeout(() => {
    //   console.log(222)
    // }, 10);



    // this.axios.get('/getlist')
    // .then(function (response) {
    //   console.log(response);
    // })
    // .catch(function (error) {
    //   console.log(error);
    // });
  },
  methods:{
    async ev_getList(){
      let {data} = await this.axios.get('/getlist')
      console.log('data',data)
    },
    check(idx){
      var arr=[]
      this.cartList[idx].check=!this.cartList[idx].check
      console.log(idx)
      this.cartList.forEach(item =>{
        if(item.check==true){
            arr.push(item)
        }
      })
      if(arr.length==this.cartList.length){
        this.checkAlled=true
      }else{
        this.checkAlled=false
      }
      this.totalPrice=0
      this.cartList.forEach(item=>{
        if(item.check==true){
          this.totalPrice=this.totalPrice+item.price*item.count
        }
      })
    },
    checkAll(){
      var flag=true
      this.checkAlled=!this.checkAlled
      this.cartList.forEach(item =>{
        if(item.check==false){
          flag=false
          console.log(item)
        }
      })
      this.cartList.forEach(item =>{
        if(flag==false){
          item.check=true
        }else{
          item.check=!item.check
        }
      })
      this.totalPrice=0
      this.cartList.forEach(item=>{
        if(item.check==true){
          this.totalPrice=this.totalPrice+item.price*item.count
        }
      })
    },
    reduce(idx){
      if(this.cartList[idx].count>1){
        this.cartList[idx].count=this.cartList[idx].count-1
      }else{
        this.cartList[idx].count=1
      }
      this.totalPrice=0
      this.cartList.forEach(item=>{
        if(item.check==true){
          this.totalPrice=this.totalPrice+item.price*item.count
        }
      })
    },
    add(idx){
      this.cartList[idx].count=this.cartList[idx].count+1
      this.totalPrice=0
      this.cartList.forEach(item=>{
        if(item.check==true){
          this.totalPrice=this.totalPrice+item.price*item.count
        }
      })
    },

  }
};
</script>

<style scoped lang="less">
#cart {
  background: #f5f5f5;
  padding-bottom: 1.48rem;
  .head {
    position: relative;
    .headerText {
      font-size: 0.17rem;
      color: #ffffff;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
    }
    .edit {
      font-size: 0.14rem;
      font-weight: bold;
      color: #e0e0e0;
      position: absolute;
      top: 0.12rem;
      right: 0.1rem;
    }
  }
  .contentBox {
    .cartBox {
      background: #ffffff;
      border-radius: 0.08rem 0.08rem 0 0;
      margin: 0.16rem;
      margin-bottom: 0;
      padding: 0.12rem 0;
      .cartList {
        .cartLi:nth-child(1) {
          margin-top: 0;
          border-bottom: 0.01rem solid #ebebeb;
          padding-bottom: 0.16rem;
        }
        .cartLi {
          display: flex;
          margin: 0.12rem 0.12rem 0;
          img {
            width: 1rem;
            height: 1rem;
            margin-left: 0.16rem;
          }
          .check {
            display: inline-block;
            width: 0.16rem;
            height: 0.16rem;
            background: #F0F0F0;
            border-radius: 50%;
            margin-top: 0.48rem;
          }
          .checked{
            background: #1B7373;
          }
          .leftBox {
            width: 1.74rem;
            margin-left: 0.08rem;
            display: flex;
            flex-direction: column;
            .name {
              font-size: 0.14rem;
            }
            .color {
              font-size: 0.14rem;
              color: #999999;
              margin: 0.1rem 0 0.12rem;
            }
            .footer {
              display: flex;

              .price {
                font-size: 0.16rem;
              }
              .reduce {
                width: 0.2rem;
                height: 0.2rem;
                background: #f0f0f0;
                border-radius: 50%;
                border: none;
                font-size: 0.12rem;
                margin: 0.02rem 0.14rem 0 0.36rem;
              }
              .add {
                width: 0.2rem;
                height: 0.2rem;
                background: #f0f0f0;
                border-radius: 50%;
                border: none;
                font-size: 0.12rem;
                margin: 0.02rem 0 0 0.14rem;
              }
              .count {
                width: 0.24rem;
                height: 0.24rem;
                background: #f0f0f0;
                border-radius: 50%;
                font-size: 0.14rem;
                color: #e42121;
                text-align: center;
                line-height: 0.24rem;
              }
            }
          }
        }
      }
    }
    .likeTitle {
      font-size: 0.17rem;
      font-weight: 400;
      margin: 0.21rem 0 0 1.55rem;
    }
    .likeBox {
      .likeList {
        display: flex;
        flex-wrap: wrap;
        margin: 0.02rem 0.08rem 0 0.15rem;
        .likeLi {
          display: flex;
          flex-direction: column;
          background: #ffffff;
          border-radius: 0.08rem;
          margin-top: 0.12rem;
          margin-right: 0.078rem;
          img {
            width: 1.68rem;
            height: 1.68rem;
          }
          .name {
            display: inline-block;
            width: 1.52rem;
            font-size: 0.14rem;
            font-weight: bold;
            margin: 0.08rem 0 0.04rem 0.08rem;
          }
          .footer {
            display: flex;
            margin-bottom: 0.09rem;
            .price {
              font-size: 0.18rem;
              font-weight: bold;
              color: #e42121;
              margin-left: 0.02rem;
            }
            .city {
              font-size: 0.12rem;
              color: #999999;
              margin: 0.03rem 0 0 0.79rem;
            }
          }
        }
      }
    }
  }
  .settlementBox {
    display: flex;
    height: 0.64rem;
    background: #ffffff;
    line-height: 0.64rem;
    position: fixed;
    bottom: 0.84rem;
    .checkAllIcon {
      display: inline-block;
      width: 0.2rem;
      height: 0.2rem;
      background: #F0F0F0;
      border-radius: 50%;
      margin: 0.21rem 0 0 0.16rem;
    }
    .checkAllIcon2{
      background: #1B7373;
    }
    .checkAllText {
      font-size: 0.14rem;
      margin-left: 0.08rem;
    }
    .totalText {
      font-size: 0.14rem;
      margin-left: 1.09rem;
    }
    .totalPrice {
      width: 0.6rem;
      font-size: 0.16rem;
      color: #e42121;
    }
    .settlementBtn {
      width: 0.8rem;
      height: 0.4rem;
      background: #1b7373;
      font-size: 0.17rem;
      font-weight: 500;
      color: #ffffff;
      border: none;
      margin: 0.12rem 0 0 0.08rem;
      line-height: 0.4rem;
    }
  }
}
</style>
